{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}用户详情 - {{ target_user.username }}{% endblock %}

{% block admin_content %}
<div class="mb-3">
    <a href="{% url 'adminuser:user_management' %}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> 返回用户列表
    </a>
</div>

<div class="row">
    <!-- 用户基本信息 -->
    <div class="col-md-4">
        <div class="card mb-3">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">用户信息</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <img src="{{ profile.avatar.url|default:'/static/img/default-avatar.png' }}" class="rounded-circle img-thumbnail" width="120" alt="{{ target_user.username }}">
                    <h4 class="mt-2">{{ target_user.username }}</h4>
                    {% if target_user.is_staff %}
                    <span class="badge bg-primary">管理员</span>
                    {% endif %}
                    {% if profile.is_banned %}
                    <span class="badge bg-danger">已封禁</span>
                    {% endif %}
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted">邮箱</label>
                    <div>{{ target_user.email }}</div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted">注册时间</label>
                    <div>{{ target_user.date_joined|date:"Y-m-d H:i" }}</div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label text-muted">最后登录</label>
                    <div>{{ target_user.last_login|date:"Y-m-d H:i"|default:"从未登录" }}</div>
                </div>
                
                {% if profile.bio %}
                <div class="mb-3">
                    <label class="form-label text-muted">个人简介</label>
                    <div>{{ profile.bio }}</div>
                </div>
                {% endif %}
                
                {% if profile.is_banned %}
                <div class="mb-3">
                    <label class="form-label text-muted">封禁原因</label>
                    <div class="text-danger">{{ profile.ban_reason }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label text-muted">封禁时间</label>
                    <div>{{ profile.ban_time|date:"Y-m-d H:i" }}</div>
                </div>
                {% endif %}
            </div>
            <div class="card-footer">
                {% if not target_user.is_staff and not target_user.is_superuser %}
                {% if profile.is_banned %}
                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#unbanModal">
                    <i class="bi bi-unlock"></i> 解除封禁
                </button>
                {% else %}
                <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#banModal">
                    <i class="bi bi-shield-x"></i> 封禁用户
                </button>
                {% endif %}
                {% else %}
                <div class="text-muted">无法对管理员执行操作</div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 用户动态 -->
    <div class="col-md-8">
        <!-- 用户的故事 -->
        <div class="card mb-3">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">用户的故事 ({{ stories.count }})</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for story in stories %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ story.title }}</h6>
                                <small class="text-muted">
                                    {{ story.created_at|date:"Y-m-d H:i" }} | 
                                    浏览: {{ story.views }} | 
                                    点赞: {{ story.likes }}
                                </small>
                            </div>
                            <div>
                                <a href="{% url 'story:detail' pk=story.id %}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i> 查看
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteStoryModal{{ story.id }}">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 删除故事确认模态框 -->
                    <div class="modal fade" id="deleteStoryModal{{ story.id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">确认删除</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>您确定要删除故事 "{{ story.title }}" 吗？该操作不可撤销。</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <form action="{% url 'adminuser:delete_story' story_id=story.id %}" method="post">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger">确认删除</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="list-group-item text-center py-3">
                        <p class="text-muted mb-0">该用户还没有创建任何故事</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">最近活动</h5>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for activity in activities %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge bg-info">{{ activity.activity_type }}</span>
                                <small class="text-muted ms-2">{{ activity.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="list-group-item text-center py-3">
                        <p class="text-muted mb-0">没有记录到用户活动</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 封禁模态框 -->
<div class="modal fade" id="banModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">封禁用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{% url 'adminuser:toggle_ban_user' user_id=target_user.id %}" method="post">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ban_reason" class="form-label">封禁原因</label>
                        <textarea class="form-control" id="ban_reason" name="ban_reason" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确认封禁</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 解除封禁模态框 -->
<div class="modal fade" id="unbanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">解除封禁</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>您确定要解除对用户 {{ target_user.username }} 的封禁吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <form action="{% url 'adminuser:toggle_ban_user' user_id=target_user.id %}" method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-success">确认解除</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %} 